<template>
  <div class="modal" ref="self">
    <div class="confirm">
      <div class="title">提示</div>
      <div class="content">{{ msg }}</div>
      <div class="btn-group">
        <div
          class="button-confirm"
          @click="handleConfirm"
          v-if="[0, 1].includes(type)"
        >
          确定
        </div>
        <div
          class="button-cancel"
          @click="handleCancel"
          v-if="[0].includes(type)"
        >
          取消
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "EwgConfirm",
  props: {
    msg: {
      type: String,
      default: ""
    },
    res: {
      type: Function,
      default: () => true
    },
    rej: {
      type: Function,
      default: () => false
    },
    type: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const self = ref();
    const handleDestory = () => {
      document.body.removeChild(self.value.parentNode);
    };
    const handleConfirm = () => {
      handleDestory();
      props.res(true);
    };
    const handleCancel = () => {
      handleDestory();
      props.res(false);
    };
    return {
      handleConfirm,
      handleCancel,
      handleDestory,
      self
    };
  }
});
</script>
<style lang="scss" scoped>
.confirm {
  width: 400px;
  min-height: 200px;
  background: $--color-black-half-quarter;
  border-radius: $--border-radius;
  border: 5px solid $--color-white;
  color: $--color-white;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .content {
    flex: 1;
  }
  .btn-group {
    align-self: flex-end;
    height: 30px;
  }
}
</style>
